<template>
	<div class="my_authen">
		<van-sticky>
			<van-nav-bar title="企业认证" left-arrow @click-left="back" />
		</van-sticky>
		<div class="content">
			<div class="card" v-if="!detail.entName">
				<div class="flex user">
					<div class="head">
						<!-- <img :src="myMsg.avatarFile.uriPath" class="picimg" alt=""> -->
					</div>
					<strong class="name">身份认证</strong>
				</div>
				<p class="text">获取专属认证标识，享受更多权益</p>
				<div class="tags flex">
					<span class="flex"> <i class="icon-tag"></i> 专属标示</span>
					<span class="flex"> <i class="icon-tag"></i> 专属服务</span>
				</div>
			</div>

			<div class="card" v-if="detail.entName">
				<div class="flex user">
					<div class="head">
						<img :src="detail.logoUri" class="picimg" alt="">
					</div>
					<strong class="name">{{detail.entName}}</strong>
				</div>
				<div class="tags mt_38 flex">
					<span class="flex"> <i class="icon-biaozhi"></i> {{detail.regionName}}</span>
					<span class="flex">{{detail.regionName}}</span>
				</div>
				<div class="tags mt_38 flex">
					<span class="flex"> <i class="icon-phone"></i> {{detail.phone}}</span>
				</div>
			</div>

			<div class="progess" v-if="detail.auditStatus === 0">
				<i class="icon-progess"></i>
				证件审核中
			</div>

			<div class="progess" v-if="detail.auditStatus == 2 || detail.level != 0">
				<i class="icon-progess"></i>
				前去认证
			</div>

			<div class="tips mt_38">
				<h6>——— 普通认证权益 ———</h6>
				<p>尊贵的巨服中国会员请在注册后及时完成企业认证。您将享受到以下认证权益：</p>
				<p>1.您的企业信息将及时更新到黄页企业库，得到各方检索并达到宣传和推广效果。</p>
				<p>2.您的企业信息将伴随巨服中国平台一同发展传播推动和打造企业影响力。</p>
				<p>3.您也可以直接点击分享，让宣传更便捷。4.您也可以继续完成高级认证获取更多权益。</p>
			</div>
			<router-link tag="div" to="/authen/submit-1" class="btn" v-if="detail.level == 0">普通认证(免费)</router-link>
			<div class="tips">
				<h6>——— 高级认证权益 ———</h6>
				<p>尊贵的巨服中国会员您的企业完成高级认证将获得企业普通认证的全部权益的基础上，还将获得如下权益:</p>
				<p>1.拥有企业独有主页，更加细致和全面的在黄页企业库展示和宣传企业信息。</p>
				<p>2.高级认证会员巨服中国将及时并不定期的为您的企业在公共渠道联同推广，赢得更广泛的宣传效果。</p>
				<p>3.您还将拥有特有人才招聘权限通道，招聘优秀人才。</p>
				<p>4.还将获得巨服中国5星会员单位称号。</p>
			</div>
			<router-link tag="div" to="/authen/submit" class="btn" v-if="detail.level != 1">高级认证(360元/年)</router-link>
			<!-- <router-link tag="div" to="/authen/submit" class="btn">前去认证</router-link> -->
		</div>
	</div>
</template>

<script>
	import api from 'api/api'
	export default {
		data() {
			return {
				chosenAddressId: '1',
				detail: {},
				myMsg: JSON.parse(localStorage.getItem('my')),
			}
		},
		created() {
			this.getData()
		},
		methods: {
			getData() {
				api.authenticationManage().then(res => {
					// conso.log(res)
					this.detail = res.data
					console.log(this.detail)
				})
			},
			back() {
				window.history.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.my_authen {
		min-height: 100vh;

		.content {
			text-align: left;
			padding: 0.32rem;
		}

		.card {
			width: 6.88rem;
			height: 3.17rem;
			background-image: url("../../../assets/img/my/bg_renzheng.png");
			background-size: 100%;
			color: #fff;
			padding-left: 0.44rem;

			.user {
				align-items: center;
				padding-top: 0.65rem;
			}

			.text {
				font-size: 0.24rem;
				margin: 0.33rem 0;
			}

			.head {
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 50%;
				font-size: 0.37rem;
				margin-right: 0.13rem;
				position: relative;

				.picimg {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					position: absolute;
					top: 0;
				}

			}

			.name {
				font-size: 0.37rem;
			}

			.tags {
				font-size: 0.24rem;

				span {
					margin-right: 0.47rem;
					align-items: center;
				}
			}
		}

		.progess {
			width: 100%;
			line-height: 0.87rem;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2px 9px 0px rgba(65, 240, 139, 0.15);
			border-radius: 0.43rem;
			font-size: 0.3rem;
			display: flex;
			align-items: center;
			margin-top: 0.3rem;
		}

		.icon-progess {
			width: 0.8rem;
			height: 0.8rem;
			background-image: url("../../../assets/img/my/shehe.png");
			background-size: 100%;
			margin: 0 0.05rem;
		}

		.icon-tag {
			width: 0.31rem;
			height: 0.31rem;
			background-image: url("../../../assets/img/my/icon1.png");
			background-size: contain;
			background-repeat: no-repeat;
			margin-right: 0.13rem;
		}

		.icon-biaozhi {
			width: 0.33rem;
			height: 0.23rem;
			background-image: url("../../../assets/img/my/biaozhi.png");
			background-size: contain;
			background-repeat: no-repeat;
			margin-right: 0.13rem;
		}

		.icon-phone {
			width: 0.33rem;
			height: 0.23rem;
			background-image: url("../../../assets/img/my/dianhua.png");
			background-size: contain;
			background-repeat: no-repeat;
			margin-right: 0.13rem;
		}

		.btn {
			width: 6.88rem;
			height: 0.91rem;
			line-height: 0.91rem;
			text-align: center;
			background: linear-gradient(96deg,
				rgba(72, 143, 240, 1),
				rgba(51, 130, 239, 1));
			border-radius: 0.45rem;
			margin: 0 auto;
			color: #fff;
			font-size: 0.36rem;
		}

		.mb_18 {
			margin-bottom: 0.18rem;
		}

		.mb_105 {
			margin-bottom: 1.05rem;
		}

		.mt_38 {
			margin-top: 0.38rem;
		}

		.tips {
			h6 {
				font-size: 0.3rem;
				margin-bottom: 0.4rem;
				text-align: center;
			}

			p {
				font-size: 0.24rem;
				margin-bottom: 0.3rem;
			}
		}
	}
</style>
